<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('试卷预览')" />
</head>
<style>
	.qu-content{
		border-bottom: #eee 1px solid;
		padding-bottom: 10px;
	}
	.qu-content div{
		line-height: 30px;
	}
	.el-checkbox-group label,.el-radio-group label{
		width: 100%;
	}
	.card-title{
		background: #eee;
		line-height: 35px;
		text-align: center;
		font-size: 14px;
	}
	.card-line{
		padding-left: 10px
	}
	.card-line span {
		cursor: pointer;
		margin: 2px;
	}
</style>
<body class="white-bg">
    <div id="app" class="wrapper wrapper-content animated fadeInRight ibox-content">
		<h2 class="text-center">{{ paperData.title }}</h2>
    	<p class="text-center" style="color: #666"></p>
   	 	<el-row :gutter="24" style="margin-top: 50px">
	        <el-col :span="8" class="text-center">
				考试时间：{{ paperData.totalTime }}
	        </el-col>
		    <el-col :span="8" class="text-center">
		      	
		    </el-col>
		    <el-col :span="8" class="text-center">
				考试总分：{{ paperData.totalScore }}
		    </el-col>
   		</el-row>
   		<el-card style="margin-top: 20px">
   			 <div v-for="item in quList" :key="item.id" class="qu-content">
   			 	<p>{{ item.sort + 1 }}.{{ item.content }}（分数：{{ item.score }}）</p>
   			 	<div v-if="item.quType == '1' || item.quType=='3'">
   			 		<el-radio-group v-model="radioValues">
   			 			<el-radio v-for="an in item.answerList" :key="an.quId" :label="an.quId">
   			 			{{ an.abc }}.{{ an.content }}
   			 			</el-radio>
          			</el-radio-group> 
          			<el-row :gutter="24">
          				<el-col :span="12" style="color: #24da70">
             		 		正确答案：{{ radioRights[item.quId] }}
            			</el-col>
           			</el-row>	 
   			 	</div>
   			 	<div v-if="item.quType == '2'">
   			 		<el-checkbox-group v-model="multiValues">
            			<el-checkbox v-for="an in item.answerList" :key="an.quId" :label="an.quId">
            				{{ an.abc }}.{{ an.content }}
            			</el-checkbox>
          			</el-checkbox-group>
          			<el-row :gutter="24">
            			<el-col :span="12" style="color: #24da70">
              				正确答案：{{ multiRights[item.quId].join(',') }}
            			</el-col>
          			</el-row>
   			 	</div>
   			 </div>
   		</el-card>
	</div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript" >
    	var model = [[${model}]];
		var vObj = new Vue({
			el: '#app',
			data(){
				return{
					paperData:{
						paperQulist: []
					},
					radioValues:'',
					multiValues:[],
				    radioRights: {},
				    multiRights: {},
				    userTime:0,
				    quList:[]
				}
			},
			methods: {
				
			},
			created(){
				if(model){
					this.paperData = model;
					if(this.paperData.paperQulist){
						for(var i in this.paperData.paperQulist){
							var obj = this.paperData.paperQulist[i];
							var radioRight = '';
		                 	var multiRight = [];
		                 	for(var j in obj.answerList){
		                 		var ansObj = obj.answerList[j];
		                 		 // 正确答案
		                        if (ansObj.isRight) {
		                        	if (obj.quType == '1' || obj.quType == '3') {
		                            	radioRight = ansObj.abc
		                            } else {
		                            	multiRight.push(ansObj.abc)
		                            }
		                        }
		                 	}
		                 	this.radioRights[obj.quId] = radioRight
		                 	this.multiRights[obj.quId] = multiRight
		                 	this.quList.push(obj);
						}
					}
				}
			}
		})
	</script>
</body>
</html>
